import React, { useState, useEffect, useRef } from 'react';
import { fadeIn, scaleIn, bounceIn } from '../utils/animations';
import './Edit.css';

const Edit: React.FC = () => {
  const [isEditing, setIsEditing] = useState(false);
  const [editProgress, setEditProgress] = useState(0);
  const [editResult, setEditResult] = useState<string | null>(null);
  const emptyStateRef = useRef<HTMLDivElement | null>(null);
  const editingRef = useRef<HTMLDivElement | null>(null);
  const resultRef = useRef<HTMLDivElement | null>(null);

  // 页面加载动画
  useEffect(() => {
    if (emptyStateRef.current) {
      fadeIn(emptyStateRef.current, { delay: 0.3 });
    }
  }, []);

  // 编辑状态动画
  useEffect(() => {
    if (isEditing && editingRef.current) {
      bounceIn(editingRef.current);
    }
  }, [isEditing]);

  // 结果状态动画
  useEffect(() => {
    if (editResult && resultRef.current) {
      scaleIn(resultRef.current, { delay: 0.2 });
    }
  }, [editResult]);

  const handleEdit = async () => {
    setIsEditing(true);
    setEditProgress(0);
    
    // 模拟编辑过程
    const interval = setInterval(() => {
      setEditProgress(prev => {
        if (prev >= 100) {
          clearInterval(interval);
          setIsEditing(false);
          setEditResult('编辑完成！这里将显示编辑后的结果...');
          return 100;
        }
        return prev + 10;
      });
    }, 200);
  };

  return (
    <div className="edit-page">
      {/* 顶部控制栏 */}
      <div className="edit-controls">
        <div className="control-filters">
          <div className="filter-dropdown">
            <button className="filter-btn">
              编辑类型 
              <svg
                width="1em"
                height="1em"
                viewBox="0 0 24 24"
                preserveAspectRatio="xMidYMid meet"
                fill="none"
                role="presentation"
                xmlns="http://www.w3.org/2000/svg"
                className="dropdown-arrow"
              >
                <g>
                  <path
                    data-follow-fill="currentColor"
                    fillRule="evenodd"
                    clipRule="evenodd"
                    d="M21.01 7.982A1.2 1.2 0 0 1 21 9.679l-8.156 8.06a1.2 1.2 0 0 1-1.688 0L3 9.68a1.2 1.2 0 0 1 1.687-1.707L12 15.199l7.313-7.227a1.2 1.2 0 0 1 1.697.01Z"
                    fill="currentColor"
                  />
                </g>
              </svg>
            </button>
          </div>
          <div className="filter-dropdown">
            <button className="filter-btn">
              工具选择 
              <svg
                width="1em"
                height="1em"
                viewBox="0 0 24 24"
                preserveAspectRatio="xMidYMid meet"
                fill="none"
                role="presentation"
                xmlns="http://www.w3.org/2000/svg"
                className="dropdown-arrow"
              >
                <g>
                  <path
                    data-follow-fill="currentColor"
                    fillRule="evenodd"
                    clipRule="evenodd"
                    d="M21.01 7.982A1.2 1.2 0 0 1 21 9.679l-8.156 8.06a1.2 1.2 0 0 1-1.688 0L3 9.68a1.2 1.2 0 0 1 1.687-1.707L12 15.199l7.313-7.227a1.2 1.2 0 0 1 1.697.01Z"
                    fill="currentColor"
                  />
                </g>
              </svg>
            </button>
          </div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="edit-main">
        {isEditing ? (
          <div className="editing-state" ref={editingRef}>
            <div className="progress-container">
              <div className="progress-bar">
                <div 
                  className="progress-fill" 
                  style={{ width: `${editProgress}%` }}
                ></div>
              </div>
              <span className="progress-text">{editProgress}%</span>
            </div>
            <p className="editing-text">AI 正在努力编辑中，请稍候...</p>
          </div>
        ) : editResult ? (
          <div className="result-state" ref={resultRef}>
            <div className="result-content">
              <h3>编辑结果</h3>
              <div className="result-placeholder">
                <div className="result-image">✏️</div>
                <p>这里将显示编辑后的图片/视频</p>
              </div>
              <div className="result-actions">
                <button className="action-btn primary">保存</button>
                <button className="action-btn secondary">撤销</button>
                <button className="action-btn secondary">导出</button>
              </div>
            </div>
          </div>
        ) : (
          <div className="empty-state" ref={emptyStateRef}>
            <div className="empty-illustration">
              <div className="floating-figure">✏️</div>
            </div>
            <p className="empty-text">暂未找到可编辑的内容</p>
            <button className="start-edit-btn" onClick={handleEdit}>
              开始编辑
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

export default Edit;
